<template>
  <el-card class="searchForm">
    <el-form
      ref="formEl"
      :model="form"
      label-width="120px"
      label-position="right"
      :inline="true"
    >
      <el-form-item
        label="请求方法："
        prop="httpMethod"
      >
        <el-select
          v-model="form.httpMethod"
          placeholder="请求方式"
        >
          <el-option
            v-for="item in httpMethods"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="哈希异常："
        prop="hasException"
      >
        <el-select
          v-model="form.hasException"
          placeholder="哈希异常"
        >
          <el-option
            v-for="item in hasExceptions"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="http状态码："
        prop="httpStatusCode"
      >
        <el-select
          v-model="form.httpStatusCode"
          placeholder="http状态码"
        >
          <el-option
            v-for="item in allHttpStatusCodes"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="请求URL："
        prop="url"
      >
        <el-input
          v-model="form.url"
          placeholder="请输入URL"
        />
      </el-form-item>
      <el-form-item
        label="用户名："
        prop="userName"
      >
        <el-input
          v-model="form.userName"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item
        label="应用ID："
        prop="applicationName"
      >
        <el-input
          v-model="form.applicationName"
          placeholder="请输入应用ID"
        />
      </el-form-item>
      <el-form-item
        label="最小执行时间："
        prop="minExecutionDuration"
      >
        <el-input
          v-model.number="form.minExecutionDuration"
          placeholder="最小执行时间"
        />
      </el-form-item>
      <el-form-item
        label="最大执行时间："
        prop="maxExecutionDuration"
      >
        <el-input
          v-model.number="form.maxExecutionDuration"
          placeholder="最大执行时间"
        />
      </el-form-item>
      <el-form-item
        label="接口调用时间："
        prop="date"
      >
        <DatePicker
          v-model="form.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 24, 0, 0),
                          new Date(2000, 2, 1, 23, 59, 59),]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
          @click="handleClear"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { computed, PropType, ref } from 'vue'
import HttpStatusCodes from '@/utils/httpStatus'
import { IElForm } from '@/types/element-plus'
import DatePicker from '@/components/DatePicker/index.vue'
import { IAuditLogParams } from '@/http/types/auditLog'

const props = defineProps({
  form: {
    type: Object as PropType<IAuditLogParams>,
    default: () => ({
      httpMethod: '',
      hasException: '',
      httpStatusCode: '',
      url: '',
      userName: '',
      applicationName: '',
      minExecutionDuration: '',
      maxExecutionDuration: '',
      date: ['', '']
    })
  }
})

const httpMethods = [
  {
    type: '请求方法',
    value: ''
  },
  {
    type: 'get',
    value: 'GET'
  },
  {
    type: 'post',
    value: 'POST'
  },
  {
    type: 'put',
    value: 'PUT'
  },
  {
    type: 'delete',
    value: 'DELETE'
  }
]
const hasExceptions = [
  {
    type: '哈希异常',
    value: ''
  },
  {
    type: '异常',
    value: true
  },
  {
    type: '无异常',
    value: false
  }
]
const allHttpStatusCodes = computed(() => {
  const arr:{
    type:any,
    value:any
  }[] = HttpStatusCodes.map(e => {
    return {
      type: e,
      value: e
    }
  })
  arr.unshift({
    type: 'http状态码',
    value: ''
  })
  return arr
})
const form = ref<IAuditLogParams>(props.form)
interface EmitsType {
  (e: 'search', value: IAuditLogParams): void
}
const emit = defineEmits<EmitsType>()

const formEl = ref<IElForm>()

const handleSearch = () => {
  emit('search', form.value)
}
const handleClear = () => {
  formEl.value?.resetFields() // 清除表单数据
  handleSearch()
}
</script>

<style scoped lang="scss">
.searchForm{
  margin-bottom: 10px;
}
</style>
